<template>
    <div class="menu-button">
        <div class="bgp">
            <div class="wh frcc">
                <el-button
                    size="large"
                    style="
                        width: 200px;
                        height: 70px;
                        font-size: 25px;
                        border-width: 3px;
                        border-color: #409eff;
                        text-decoration-line: none;
                    "
                    tag="a"
                    target="_self"
                    :href="teacher_url"
                    plain>
                    教师端
                </el-button>
                <el-button
                    size="large"
                    style="
                        width: 200px;
                        height: 70px;
                        font-size: 25px;
                        border-width: 3px;
                        border-color: #409eff;
                        text-decoration-line: none;
                    "
                    tag="a"
                    target="_self"
                    :href="student_url"
                    plain>
                    学生端
                </el-button>
            </div>
        </div>
        <div class="label">
            <slot></slot>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const student_url = GLOBAL_STUDENT_URL
const teacher_url = GLOBAL_TEACHER_URL
</script>

<style lang="scss" scoped>
@use 'src/assets/scss/main.scss' as *;

@keyframes fly {
    0% {
        background-size: 100%;
    }
    20% {
        background-size: 150%;
        background-position: 0% 50%;
    }
    80% {
        background-size: 150%;
        background-position: 100% 50%;
    }
    100% {
        background-size: 100%;
        background-position: 100% 100%;
    }
}
.menu-button {
    height: 250px;
    // background-color: rgba(0, 128, 0, 1);
    border-radius: 6px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;

    @include animate_trans();
    &:hover {
        //opacity: 0.7;
        // box-shadow: 10px;
        // @mixin base-box-shadow-10 {
        //     box-shadow: rgb(255, 255, 255) 0 0 10px;
        // }
        @include base-box-shadow-10;
    }

    &:active {
        //transform: translate(2px,2px);
        @include hover-move(2px);
    }

    .bgp {
        width: 100%;
        height: 100%;
        // background-image: url('/img/main/btn-laser.png');
        background-image: url('/img/main/crawler.png');
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        transition: all 0.4s ease-in;

        &:hover {
            animation: fly 1.5s forwards;
            // background-size: 120%;
            // background-position:100% 50%;
        }
    }

    .label {
        display: block;
        position: absolute;
        left: 30px;
        bottom: 16px;
        font-size: 22px;
        // align-items: center;
    }
}
</style>
